<template>
  <div class=''>
    <h2>动画</h2>
    <button v-on:click="show = !show">点我</button>
    <!-- <transition name="fade">
       <div v-if="show" key="if">我是v-if</div>
       <div v-else key="else">我是v-else</div>
    </transition> -->

    <!-- <transition name="fade" mode="in-out">
       <div v-if="show" key="if">我是v-if</div>
       <div v-else key="else">我是v-else</div>
    </transition> -->

    <!-- <transition name="fade" mode="out-in">
       <div v-if="show" key="if">我是v-if</div>
       <div v-else key="else">我是v-else</div>
    </transition> -->

    <button @click="handerClick">点击组件动画</button>
    <transition name="fade">
      <component :is="type"></component>
    </transition>

    <!-- <transition name="fade"> 错误
       <div v-show="show" key="if">我是v-if</div>
       <div v-show="!show" key="else">我是v-else</div>
    </transition> -->
    
    <transition-group name="fade">
       <div v-show="show" key="if">我是v-if</div>
       <div v-show="!show" key="else">我是v-else</div>
    </transition-group>

  </div>
</template>

<script>
import ChildOne from '@/components/ChildOne.vue'
import ChildTwo from '@/components/ChildTwo.vue'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    ChildOne,ChildTwo
  },
  data() {
    //这里存放数据
    return {
      show: true,
      type:'child-one'
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeAim() {
      this.isShow = !this.isShow
    },
    handerClick(){
      this.type = this.type=='child-one'?'child-two':'child-one'
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
}
</script>
<style lang='scss' scoped>
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s;
}
</style>